<template>
  <div :style="{ height: '720px', width: '100%', position: 'relative' }" class="alarmBox">
    <AllAlarmList
      :visible="isAlarmListShow"
      v-if="isAlarmListShow"
      @close="closeAlarmList"
      @clickRow="onClickRow"
      @handleDispose="onHandleDispose"
      ref="allAlarmListId"
    />
    <map-draw ref="mapDraw" v-if="reloading" />
    <div class="drawer" v-show="isRightDrawerShow">
      <div class="drawer-title">
        <span>{{ filterMultiDictText(alarmTypeDatas, alarmType) }}</span>
        <a-icon class="close-icon" type="close" @click="handleDrawer" />
      </div>
      <div class="drawer-body">
        <a-button
          v-if="Object.keys(result).length > 0 && result.status == 0 && isOperation"
          @click="onHandleDispose(result)"
          type="primary"
          style="position: absolute; right: 24px;"
          >处置</a-button
        >
        <a-descriptions :column="1" layout="vertical">
          <a-descriptions-item label="告警程度" v-if="Object.keys(result).length > 0 && result.alarmLevel">
            <a-tag color="pink" v-if="result.alarmLevel == 1"> 黄色告警 </a-tag>
            <a-tag color="orange" v-if="result.alarmLevel == 2"> 橙色告警 </a-tag>
            <a-tag color="red" v-if="result.alarmLevel == 3"> 红色告警 </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="人员信息">
            <a-table :columns="columns" :data-source="personData" rowKey="phone">
              <template slot="order" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
            </a-table>
          </a-descriptions-item>
          <a-descriptions-item label="详细情况">
            <p v-if="Object.keys(result).length > 0 && result.description">{{ result.description }}</p>
          </a-descriptions-item>
          <a-descriptions-item label="处置详情" v-if="Object.keys(result).length > 0 && result.status === 1">
            <p>
              处置人员：{{
                Object.keys(results).length > 0 && results.disposalUserName ? results.disposalUserName : ''
              }}
            </p>
            <p>处置说明：{{ Object.keys(results).length > 0 && results.disposal ? results.disposal : '' }}</p>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <div class="handle leftHandle" v-show="leftVisible" @click="clickLeft">
      <a-icon class="close-icon" type="right" title="展开" />
    </div>
    <div class="handle rightHandle" v-show="rightVisible" @click="clickRight">
      <a-icon class="close-icon" type="left" title="展开" />
    </div>
    <dispose-modal :taskId="taskId" ref="disposeModalRef" @ok="modalFormOk" />
  </div>
</template>

<script>
import * as alarmApi from '@/api/wxSmuggle/alarm.js'
import * as caseApi from '@/api/wxSmuggle/areaEvent.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import mapDraw from '../modules/mapDraw'
import disposeModal from './modules/disposeModal'
import AllAlarmList from './modules/allAlarmList'
import { drctAlarmType } from '@/utils/tenantFilter'
export default {
  components: { mapDraw, disposeModal, AllAlarmList },
  data() {
    return {
      title: '外省人员入岛行为告警',
      reloading: true,
      alarmTypeDatas: null,
      alarmType: null,
      taskId: null,
      uuid: null,
      ids: null,
      result: {},
      results: {},
      personData: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          scopedSlots: { customRender: 'order' }
        },
        {
          title: '姓名/代号',
          dataIndex: 'codeName',
          ellipsis: true
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          ellipsis: true
        }
      ],
      isAlarmListShow: false,
      isRightDrawerShow: true,
      leftVisible: false,
      rightVisible: false,
      isOperation: true,
      operationModule: 2
    }
  },
  created() {
    this.alarmTypeDatas = drctAlarmType
    //告警一张图菜单进来
    if (this.$route.name == 'allAlarmMap') {
      this.leftVisible = true
      this.isAlarmListShow = true
      this.rightVisible = false
      this.isRightDrawerShow = false
    }
    if (this.$route.query && Object.keys(this.$route.query).length > 0) {
      let query = this.$route.query
      if (query.taskId) {
        this.taskId = query.taskId
      }
      if (query.uuid) {
        this.uuid = query.uuid
      }
      if (query.ids) {
        this.ids = query.ids
      }
      if (query.isOperation) {
        let str = query.isOperation.toString()
        if (str == 'true') {
          this.isOperation = true //发起人
        } else {
          this.isOperation = false //审批人
        }
      }
      if (query.operationModule != undefined) {
        this.operationModule = query.operationModule
      } else {
        this.operationModule = 2
      }
    }
  },
  mounted() {
    if (this.uuid) this.getAlarmMessageItem(this.uuid)
    if (this.uuid) this.getAlramDisposal(this.uuid)
  },
  watch: {
    $route(data) {
      let query = data.query
      if (query.isOperation != undefined) {
        let str = query.isOperation.toString()
        if (str == 'true') {
          this.isOperation = true //发起人
        } else {
          this.isOperation = false //审批人
        }
      }
      if (query.operationModule != undefined) {
        this.operationModule = query.operationModule
      } else {
        this.operationModule = 2
      }
    }
  },
  methods: {
    modalFormOk() {
      if (this.$refs.allAlarmListId != undefined) {
        this.$refs.allAlarmListId.refreshTable()
      }
      // console.log('this.uuid')
      // console.log(this.uuid)
      if (this.uuid) this.getAlarmMessageItem(this.uuid)
      if (this.uuid) this.getAlramDisposal(this.uuid)
    },
    //获取详情
    getAlarmMessageItem(uuid) {
      let form = { uuid: uuid, operationModule: this.operationModule }
      alarmApi
        .getAlarmMessageItem(form)
        .then(res => {
          if (res.success) {
            this.result = res.result ? res.result : {}
            if (Object.keys(this.result).length > 0 && this.result.alarmType) {
              this.alarmType = this.result.alarmType
              console.log(this.alarmType)
            }
            if (Object.keys(this.result).length > 0 && this.result.person) {
              this.personData = this.result.person
              let position = []
              this.personData.forEach((item, i) => {
                let list = item.position.map((obj, index) => {
                  return {
                    key: index,
                    alarmTime: obj.alarmTime,
                    latitude: obj.latitude,
                    longitude: obj.longitude,
                    codeName: item.codeName,
                    phone: item.phone
                  }
                })
                position.push({ list })
              })
              // if(this.alarmTypeValue===0||this.alarmTypeValue===1) {
              //   let areaId = this.result.areaId
              //   this.getDetail(areaId)
              // } else {
              this.$nextTick(() => {
                this.$refs.mapDraw.drawTaskDetailsDrawer(position)
              })
              // }
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取区域数据
    getDetail(areaId) {
      caseApi
        .getDetailsById({ id: areaId })
        .then(res => {
          if (res.success) {
            let { name, type, chartVOList } = res.result
            let editForm = { name, type, chartVOList }
            this.$nextTick(() => {
              this.$refs.mapDraw.clearAll()
              this.$refs.mapDraw.onEdit(editForm)
            })
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    //获取处置详情
    getAlramDisposal(uuid) {
      // let ids = id?id.split(','):[]
      let form = { uuid: uuid }
      alarmApi
        .getAlramDisposal(form)
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : {}
            if (Object.keys(result).length > 0 && result.disposal) {
              this.$set(this.results, 'disposal', result.disposal)
            }
            if (Object.keys(result).length > 0 && result.targetName) {
              this.$set(this.results, 'disposalUserName', result.targetName)
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    closeAlarmList() {
      this.isAlarmListShow = false
    },
    clickLeft() {
      this.isAlarmListShow = true
    },
    clickRight() {
      this.isRightDrawerShow = true
      this.rightVisible = false
      // this.isDetail1Show = true
    },
    onClickRow(row) {
      console.log(row)
      this.isRightDrawerShow = true
      this.rightVisible = false
      this.taskId = row.taskId
      this.ids = row.ids
      this.uuid = row.uuid
      this.getAlarmMessageItem(row.uuid)
      this.getAlramDisposal(row.uuid)
    },
    onHandleDispose(record) {
      let obj = {
        ids: this.ids,
        ...record
      }
      console.log(obj)
      this.$refs.disposeModalRef.edit(obj, this.operationModule) // 1.告警中心，2.告警一张图, 3.告警中心-详情处置,4. 重点人管理（审计日志用）
    },
    handleDrawer() {
      this.isRightDrawerShow = false
      this.rightVisible = true
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    },
    filterMultiDictText(dictCode, text) {
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t['value'] == key)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    }
  }
}
</script>
<style lang="less" scoped>
.drawer {
  width: 400px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;
  .drawer-title {
    background-color: #f2f2f2;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }
  .drawer-body {
    padding: 20px;
    position: relative;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
/deep/.ant-descriptions-item-label {
  font-weight: bold;
}
/deep/.ant-tag-pink {
  color: #bfbf00;
  background: #eeeee7;
  border-color: #bfbf00;
}
</style>
